<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="菜单管理">
        <div class="but-layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleAdd">新建</a-button>
          </a-space>
        </div>
      </a-card>
      <a-card>
        <a-table
          :columns="menusColumns"
          :data-source="dataSource"
          rowKey="menuId"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'visible'">
              {{ record.visible == 1? '显示' : '隐藏' }}
            </template>
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button @click="handleEdit(record)">编辑</a-button>
                <a-popconfirm
                  title="确定要删除该数据吗?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="confirm(record)"
                >
                  <a-button danger type="primary">删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
    <menuModal
      v-if="show"
      :modelId="modelId"
      :show="show"
      :title="title"
      :treeData="dataSource"
      @handleSave="handleSave"
      @handleCancel="handleCancel"
    />
  </div>
</template>
<script setup>
import { message } from "ant-design-vue";
import { menusColumns } from "./columns.js";
import stateEnum from "@/enums/stateEnum.js";
import menuModal from "./components/menuModal.vue";
import { getMenuList, delMenu } from "@/api/system";
import { ref, onMounted } from "vue";
const dataSource = ref([]);
const show = ref(false);
const title = ref("");
function getMenuListFn() {
  getMenuList({type:2}).then((res) => {
    dataSource.value = res.data;
  });
}
const modelId = ref("");
function handleAdd() {
  dataSource.value = []
  modelId.value = "";
  show.value = true;
  title.value = "新建菜单";
}

function handleEdit(record) {
  modelId.value = record.menuId;
  show.value = true;
  title.value = "修改菜单";
}
function handleSave() {
  getMenuListFn();
  show.value = false;
}
function handleCancel() {
  show.value = false;
}
const confirm = (record) => {
  delMenu({ id: record.menuId }).then((res) => {
    message.error("删除成功！");
    getMenuListFn();
  });
};
onMounted(() => {
  getMenuListFn();
});
</script>
<style lang="less">
.ant-table-thead > tr > th {
  background-color: #f3f5f7 !important;
}
.ant-table-thead > tr > th::before {
  width: 0 !important;
}
.but-layout-flexSpace {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
